<template>
  <div style="height: 100%">
    <v-chart :option="option" autoresize @click="chartClick" />
    <el-dialog
      :title="show.dialog.title"
      :visible.sync="show.dialog.show"
      width="50%"
      @close="show.dialog.show = false"
    >
      <my-table :fields="show.dialog.table.fields"></my-table>
    </el-dialog>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import MyTable from '@/views/_common/ElTable'

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: 'UserEchars',

  components: {
    VChart,
    MyTable
  },

  props: {
    data: {
      type: Array,
      default: () => []
    }
  },

  data: () => ({
    show: {
      dialog: {
        title: null,
        show: false,
        table: {
          fields: []
        }
      }
    }
  }),

  computed: {
    option() {
      let xData = []
      let yData = []
      this.data.forEach((d) => {
        xData.push(d.users_name)
        yData.push(d.totalScore)
      })
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data: yData
          }
        ]
      }
    }
  },

  mounted() {
    this.show.dialog.table.fields = [
      {
        name: '工作小结分数',
        title: '工作小结分数'
      },
      {
        name: '评分时间',
        title: '评分时间'
      }
    ]
  },

  methods: {
    chartClick(params) {
      if (params.componentType === 'series') {
        this.show.dialog.title = params.name + '用户的评分'
        this.show.dialog.show = true
      }
    }
    // setChartClick() {
    //   myChart.on('click', function (params) {
    //     console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
    //     myChart.dispatchAction({
    //       type: 'dataZoom',
    //       startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    //       endValue:
    //         dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    //     })
    //   })
    // }
  }
}
</script>
